{% extends "ServerGroveTranslationEditorBundle::layout.html.twig" %}

{% block sidebar %}

<script>
    function showEntryListAll()
    {
        var $zebraStripedTable = $('.table-striped');

        $zebraStripedTable.find('tbody tr.ok').show();

        // Update colors in remaining visible rows
        $zebraStripedTable.removeClass('.table-striped')
                          .addClass('.table-striped');
    }

    function showFilterEntries(val)
    {
        var $zebraStripedTable = $('.table-striped');

        $zebraStripedTable.find('tbody tr').hide();
        
        // find alias
        var $rows = $zebraStripedTable.find('tbody tr td.alias:contains('+ val +')');
        $rows.parent('tr').show();
        $rows.each(function() {
            text = $(this).text().replace(val, '<span class="high">'+val+'</span>');
            $(this).html(text);
        });
        //find values
        var $rows = $zebraStripedTable.find('td .translation:contains('+ val +')');
        $rows.closest('tr').show();
        $rows.each(function() {
            text = $(this).text().replace(val, '<span class="high">'+val+'</span>');
            $(this).html(text);
        });
        // Update colors in remaining visible rows
        $zebraStripedTable.removeClass('.table-striped')
                          .addClass('.table-striped');
    }

    function showEntryListMissing()
    {
        var $zebraStripedTable = $('.table-striped');

        $zebraStripedTable.find('tbody tr.ok').hide();

        // Update colors in remaining visible rows
        $zebraStripedTable.removeClass('.table-striped')
                          .addClass('.table-striped');
    }

    function showTranslationEditForm(id)
    {
        $('#current-' + id).hide();
        $('#editor-' + id).show();
        $('#editor-' + id + ' textarea').focus();
    }

    function hideTranslationEditForm(id)
    {
        $('#current-' + id).show();
        $('#editor-' + id).hide();
    }

    function saveTranslation(id, entryId, localeId)
    {
        $('#save-'+id).val('Saving...');

        var newVal = $('#editor-' + id + ' textarea').val();

        $.ajax({
            type: "POST",
            url: '{{path('sg_localeditor_update_translation')}}',
            data: {
                'entryId':  entryId,
                'localeId': localeId,
                'value':    newVal
            },
            success: function(data) {
                var $currentContent = $('#current-' + id + '-content');

                $('#save-' + id).val('Save');

                $currentContent.html(newVal);
                $currentContent.parent().find('.label').hide();

                hideTranslationEditForm(id);
            }
        });
    }

    function removeEntry(id, entryId)
    {
        $('#remove-' + id).val('Removing...');

        $.ajax({
            type: "POST",
            url: '{{path('sg_localeditor_remove_translation')}}',
            data: {'id': entryId},
            success: function(data) {
                if (data.result) {
                    $('#entry-' + id).remove();
                } else {
                    $('#remove-' + id).val('Failure');

                    setTimeout(function () {
                        $('#remove-' + id).val('Remove');
                    }, 3000);
                }
            }
        });
    }

    function saveEntryForm(form)
    {
        var url  = form.attr('action'),
            data = form.serializeArray();

        $('.alert').hide();

        $.ajax({
            url:      url,
            dataType: 'json',
            data:     data,
            type:     'POST',
            success: function(data) {
                var message;

                if (data && data.result) {
                    form[0].reset();

                    $('#newtranslation').hide();

                    $('#insert-ok').html(data.message);
                    $('#insert-ok').show();
                } else {
                    message = (data && data.message)
                        ? ': ' + data.message
                        : 'Unknown error';

                    $('#errmsg').html(message);
                    $('#insert-error').show();
                }

            }
        });

        return false;
    }

    function removeLocale(id, localeId)
    {
        $('#remove-locale-' + id).val('Removing...');

        $.ajax({
            type: "POST",
            url: '{{path('sg_localeditor_remove_locale')}}',
            data: {'id': localeId},
            success: function(data) {
                if (data.result) {
                    $('#locale-' + id).remove();
                } else {
                    $('#remove-locale-' + id).val('Failure');

                    setTimeout(function () {
                        $('#remove=locale-' + id).val('Remove');
                    }, 3000);
                }
            }
        });
    }

    function saveLocaleForm(form)
    {
        var url  = form.attr('action'),
            data = form.serializeArray();

        $('.alert').hide();

        $.ajax({
            url:      url,
            dataType: 'json',
            data:     data,
            type:     'POST',
            success: function(data) {
                var message;

                if (data && data.result) {
                    form[0].reset();

                    $('#newlocale').hide();

                    $('#insert-ok').html(data.message);
                    $('#insert-ok').show();
                } else {
                    message = (data && data.message)
                        ? ': ' + data.message
                        : 'Unknown error';

                    $('#errmsg').html(message);
                    $('#insert-error').show();
                }

            }
        });

        return false;
    }

</script>

<style>
.editor {
    display: none;
}

.editor textarea {
    width: 100%;
    min-width: 200px;
    height: 100px;
}

.mysmall {
    padding: 5px; width: 50px;
    font-size: 9px;
}
</style>

<div class="panel panel-info">
    <div class="panel-heading">Stats</div>
{% if defaultLocale %}
    <div class="list-groput">
        <a href="#" onclick="showEntryListAll()" class="list-group-item">Entries: <span class="badge">{{ defaultLocale.getTranslations().count() }}</span></a>
        <a href="#" onclick="showEntryListMissing()" class="list-group-item">Missing translations</a>
    </div>
{% endif %}

{% endblock %}

{% block body %}
<div class="panel panel-success panel-top-form" id="newtranslation" style="display: none" >
    <div class="panel-heading">New Entry</div>
    <div class="panel-body">
        <form method="POST" id="newtranslationform" style="display:none" onsubmit="return saveEntryForm($('#newtranslationform'))" action="{{path('sg_localeditor_add_translation')}}">
            <div class="form-group input-group">
                <label class="input-group-addon">Domain:</label>
                <select id="domain" name="domain" class="form-control"/>
                {% for bundle in bundleList %}
                    <option value="{{bundle.getName()}}">{{bundle.getName()}}</option>
                {% endfor %}
                </select>
            </div>
            <div class="form-group input-group">
                <label class="input-group-addon">File Name:</label>
                <input type="text" id="fileName" name="fileName" class="form-control"/>
            </div>
            <div class="form-group input-group">    
                <label class="input-group-addon">Alias:</label>
                <input type="text" id="alias" name="alias" class="form-control"/>
            </div>

            {% for locale in localeList %}
            <div class="form-group input-group">    
                <label class="input-group-addon">{{ locale }}:</label>
                <textarea name="translations[{{ locale.getId() }}]" style="" class="form-control"></textarea>
            </div>
            {% endfor %}
            <div class="form-group">
                <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> &nbsp;Save</button>
                <a class="btn btn-danger cancel-top-form"><i class="glyphicon glyphicon-remove"></i> &nbsp;Cancel</a>
            </div>
        </form>
    </div>
</div>

<div class="panel panel-success panel-top-form" id="newlocale" style="display: none" >
    <div class="panel-heading">New Locale</div>
    <div class="panel-body">
        <form method="POST" id="newlocaleform" style="display:none" onsubmit="return saveLocaleForm($('#newlocaleform'))" action="{{path('sg_localeditor_add_locale')}}">
            <div class="form-group input-group">
                <label class="input-group-addon">Language:</label>
                <input type="text" id="language" name="language" maxlength="2" size="2" class="form-control"/>
            </div>
            <div class="form-group input-group">
                <label class="input-group-addon">Country (optional):</label>
                <input type="text" id="country" name="country" maxlength="2" size="2" class="form-control"/>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> &nbsp;Save</button>
                <a class="btn btn-danger cancel-top-form"><i class="glyphicon glyphicon-remove"></i> &nbsp;Cancel</a>
            </div>
        </form>
    </div>
</div>
<p id="insert-ok" class="alert alert-success" style="display: none"></p>
<p id="insert-error" class="alert alert-error" style="display: none">An error ocurred while adding the translation<span id="errmsg"></span></p>

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th></th>
            <th>Domain</th>
            <th>Alias</th>
            {% for locale in localeList %}
            <th>{{locale}} {% if locale == defaultLocale %}<span class="label">Default</span>{%endif%}</th>
            {% endfor %}
        </tr>
    </thead>

    {% set localeListCount = localeList|length %}

    <tbody>
        {% for entry in entryList %}
        <tr id="entry-{{loop.index}}" {{ entry.getTranslations().count() != localeListCount ? 'class="missing"' : 'class="ok"' }}>
            <td>
                <button id="remove-{{loop.index}}" class="close" aria-hidden="true" data-placement="bottom" data-toggle="tooltip" title="Remove" onclick="confirm('Are you sure?') && removeEntry('{{loop.index}}', '{{ entry.getId() }}')">&times;</button>
            </td>
            <td class="domain">{{ entry.getDomain() }}</td>
            <td class="alias">{{ entry.getAlias() }}</td>

            {% for locale in localeList %}
            <td>
                <div id="current-{{loop.parent.loop.index}}-{{locale}}">
                    {% set translation = entry.getTranslation(locale) %}

                    <div class="translation" id="current-{{loop.parent.loop.index}}-{{locale}}-content" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
                        {% if translation %}{{ translation.getValue() }}{% endif %}
                    </div>

                    {% if defaultLocale and locale != defaultLocale and translation and defaultLocale.getTranslation(entry) and translation.getValue() == defaultLocale.getTranslation(entry).getValue() %}
                        <span class="label label-warning">Duplicate</span>
                    {% endif %}

                    {% if not translation or translation.getValue() is empty %}
                        <span class="label label-danger" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">Missing</span>
                    {% endif %}
                </div>

                <div id="editor-{{loop.parent.loop.index}}-{{locale}}" class="editor">
                    <div class="form-group">
                        <textarea class="form-control">{% if translation %}{{ translation.getValue() }}{% endif %}</textarea>
                    </div>
                    <input id="save-{{loop.parent.loop.index}}-{{locale}}"class="btn btn-sm btn-primary" type="button" value="Save" onclick="saveTranslation('{{loop.parent.loop.index}}-{{locale}}', '{{entry.getId()}}', '{{locale.getId()}}')">
                    <input class="btn btn-sm btn-danger" type="button" value="Cancel" onclick="hideTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
                </div>
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}
